<!DOCTYPE html>
<html>

	<head>
		<title>账号管理</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="UTF-8" />

		<link rel="icon" type="image/ico" href="http://tattek.com/minimal/assets/images/favicon.ico" />
		<!-- Bootstrap -->
		<link href="assets/css/vendor/bootstrap/bootstrap.min.css" rel="stylesheet">
		<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
		<link rel="stylesheet" href="assets/css/vendor/animate/animate.css">
		<link type="text/css" rel="stylesheet" media="all" href="assets/js/vendor/mmenu/css/jquery.mmenu.all.css" />
		<link rel="stylesheet" href="assets/js/vendor/videobackground/css/jquery.videobackground.css">
		<link rel="stylesheet" href="assets/css/vendor/bootstrap-checkbox.css">

		<link rel="stylesheet" href="assets/js/vendor/chosen/css/chosen.min.css">
		<link rel="stylesheet" href="assets/js/vendor/chosen/css/chosen-bootstrap.css">
		<link rel="stylesheet" href="assets/js/vendor/datatables/css/dataTables.bootstrap.css">
		<link rel="stylesheet" href="assets/js/vendor/datatables/css/ColVis.css">
		<link rel="stylesheet" href="assets/js/vendor/datatables/css/TableTools.css">
		<link href="assets/css/minimal.css" rel="stylesheet">
	</head>

	<body class="bg-1">
		<div class="mask">
			<div id="loader"></div>
		</div>
		<div id="wrap">
			<div class="row">

				<!-- 导航栏-->
				<div class="navbar navbar-default navbar-fixed-top navbar-transparent-black mm-fixed-top" role="navigation" id="navbar">
					<div class="navbar-header col-md-2">
						<a class="navbar-brand" href="index.html">
							<strong>智慧园区</strong>后台管理
						</a>
						<div class="sidebar-collapse">
							<a href="#">
								<i class="fa fa-bars"></i>
							</a>
						</div>
					</div>
					<div class="navbar-collapse">
						<!--左边刷新按钮-->
						<ul class="nav navbar-nav refresh">
							<li class="divided">
								<a href="#" class="page-refresh"><i class="fa fa-refresh"></i></a>
							</li>
						</ul>
						<!--右边用户-->
						<ul class="nav navbar-nav quick-actions">
							<li class="dropdown divided user" id="current-user">
								<div class="profile-photo">
								</div>
								<a class="dropdown-toggle options" data-toggle="dropdown" href="#">
									admin<i class="fa fa-caret-down"></i>
								</a>
								<!--鼠标悬浮框-->
								<ul class="dropdown-menu arrow settings">
									<li>
										<h3>背景颜色:</h3>
										<ul id="color-schemes">
											<li>
												<a href="#" class="bg-1"></a>
											</li>
											<li>
												<a href="#" class="bg-2"></a>
											</li>
											<li>
												<a href="#" class="bg-3"></a>
											</li>
											<li>
												<a href="#" class="bg-4"></a>
											</li>
											<li>
												<a href="#" class="bg-5"></a>
											</li>
											<li>
												<a href="#" class="bg-6"></a>
											</li>
										</ul>
									</li>
									<li class="divider"></li>
									<li>
										<a href="#"><i class="fa fa-user"></i> Profile</a>
									</li>
									<li class="divider"></li>
									<li>
										<a href="#"><i class="fa fa-power-off"></i> Logout</a>
									</li>
								</ul>
							</li>
						</ul>

						<!--左下-->
						<ul class="nav navbar-nav side-nav" id="sidebar">
							<li class="collapsed-content">
								<ul>
									<li class="search">
										<!-- Collapsed search pasting here at 768px -->
									</li>
								</ul>
							</li>
							<!--菜单-->
							<li class="navigation" id="navigation">
								<ul class="menu">
									<li class="dropdown">
										<a href="#" class="dropdown-toggle" data-toggle="dropdown">
											<i class="fa fa-tachometer"></i>设备管理<b class="fa fa-plus dropdown-plus"></b>
										</a>
										<ul class="dropdown-menu">
											<li>
												<a href="device-list.html">
													<i class="fa fa-caret-right"></i>设备列表
												</a>
											</li>
										</ul>
									</li>

									<li class="dropdown">
										<a href="#" class="dropdown-toggle" data-toggle="dropdown">
											<i class="fa fa-list"></i>告警列表<b class="fa fa-plus dropdown-plus"></b>
										</a>
										<ul class="dropdown-menu">
											<li>
												<a href="warnning-list.html">
													<i class="fa fa-caret-right"></i>历史告警列表
												</a>
											</li>
										</ul>
									</li>
	    
									<li class="dropdown  open active">
										<a href="#" class="dropdown-toggle" data-toggle="dropdown">
											<i class="fa fa-pencil"></i>系统管理<b class="fa fa-plus dropdown-plus"></b>
										</a>
										<ul class="dropdown-menu">
											<li class="active">
												<a href="user-list.html">
													<i class="fa fa-caret-right"></i>账号管理
												</a>
											</li>
											<li>
												<a href="role-list.html">
													<i class="fa fa-caret-right"></i>角色管理
												</a>
											</li>
										</ul>
									</li>
								</ul>
							</li>
						</ul>
					</div>
				</div>

				<!--主要内容-->
				<div id="content" class="col-md-12">
					<div class="main">
						<div class="row">
							<div class="col-md-12">
								<section class="tile transparent">
									<div class="tile-header transparent">
										<h1><strong>账号管理</strong></h1>
									</div>
									<div class="tile-body color transparent-black rounded-corners">

										<div class="table-responsive">
											<table class="table table-datatable table-custom" id="basicDataTable">
												<thead>
													<tr>
														<th class="sort-alpha">序号</th>
														<th class="sort-alpha">接口名称</th>
														<th class="sort-amount">API地址</th>
														<th class="sort-numeric">说明</th>
														<th>操作</th>
													</tr>
												</thead>
												<tbody>
													<tr class="odd gradeX">
														<td>Trident</td>
														<td>Internet Explorer 4.0</td>
														<td>Win 95+</td>
														<td class="text-center"> 4</td>
														<td class="text-center">X</td>
													</tr>
													<tr class="even gradeC">
														<td>Trident</td>
														<td>Internet Explorer 5.0</td>
														<td>Win 95+</td>
														<td class="text-center">5</td>
														<td class="text-center">C</td>
													</tr>
													<tr class="odd gradeA">
														<td>Trident</td>
														<td>Internet Explorer 5.5</td>
														<td>Win 95+</td>
														<td class="text-center">5.5</td>
														<td class="text-center">A</td>
													</tr>
													<tr class="even gradeA">
														<td>Trident</td>
														<td>Internet Explorer 6</td>
														<td>Win 98+</td>
														<td class="text-center">6</td>
														<td class="text-center">A</td>
													</tr>
													<tr class="odd gradeA">
														<td>Trident</td>
														<td>Internet Explorer 7</td>
														<td>Win XP SP2+</td>
														<td class="text-center">7</td>
														<td class="text-center">A</td>
													</tr>
													<tr class="even gradeA">
														<td>Trident</td>
														<td>AOL browser (AOL desktop)</td>
														<td>Win XP</td>
														<td class="text-center">6</td>
														<td class="text-center">A</td>
													</tr>
													<tr class="gradeA">
														<td>Gecko</td>
														<td>Firefox 1.0</td>
														<td>Win 98+ / OSX.2+</td>
														<td class="text-center">1.7</td>
														<td class="text-center">A</td>
													</tr>
													<tr class="gradeA">
														<td>Gecko</td>
														<td>Firefox 1.5</td>
														<td>Win 98+ / OSX.2+</td>
														<td class="text-center">1.8</td>
														<td class="text-center">A</td>
													</tr>
													<tr class="gradeA">
														<td>Gecko</td>
														<td>Firefox 2.0</td>
														<td>Win 98+ / OSX.2+</td>
														<td class="text-center">1.8</td>
														<td class="text-center">A</td>
													</tr>
													<tr class="gradeA">
														<td>Gecko</td>
														<td>Firefox 3.0</td>
														<td>Win 2k+ / OSX.3+</td>
														<td class="text-center">1.9</td>
														<td class="text-center">A</td>
													</tr>
													<tr class="gradeA">
														<td>Gecko</td>
														<td>Camino 1.0</td>
														<td>OSX.2+</td>
														<td class="text-center">1.8</td>
														<td class="text-center">A</td>
													</tr>
													<tr class="gradeA">
														<td>Gecko</td>
														<td>Camino 1.5</td>
														<td>OSX.3+</td>
														<td class="text-center">1.8</td>
														<td class="text-center">A</td>
													</tr>
													<tr class="gradeA">
														<td>Gecko</td>
														<td>Netscape 7.2</td>
														<td>Win 95+ / Mac OS 8.6-9.2</td>
														<td class="text-center">1.7</td>
														<td class="text-center">A</td>
													</tr>

													<tr class="gradeA">
														<td>Misc</td>
														<td>NetFront 3.1</td>
														<td>Embedded devices</td>
														<td class="text-center">-</td>
														<td class="text-center">C</td>
													</tr>
													<tr class="gradeA">
														<td>Misc</td>
														<td>NetFront 3.4</td>
														<td>Embedded devices</td>
														<td class="text-center">-</td>
														<td class="text-center">A</td>
													</tr>
													<tr class="gradeX">
														<td>Misc</td>
														<td>Dillo 0.8</td>
														<td>Embedded devices</td>
														<td class="text-center">-</td>
														<td class="text-center">X</td>
													</tr>
												</tbody>
											</table>
										</div>
									</div>
								</section>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<section class="videocontent" id="video"></section>
		<script src="https://code.jquery.com/jquery.js"></script>
		<!-- Include all compiled plugins (below), or include individual files as needed -->
		<script src="assets/js/vendor/bootstrap/bootstrap.min.js"></script>
		<!--<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?lang=css&skin=sons-of-obsidian"></script>-->
		<script type="text/javascript" src="assets/js/vendor/mmenu/js/jquery.mmenu.min.js"></script>
		<script type="text/javascript" src="assets/js/vendor/sparkline/jquery.sparkline.min.js"></script>
		<script type="text/javascript" src="assets/js/vendor/nicescroll/jquery.nicescroll.min.js"></script>
		<script type="text/javascript" src="assets/js/vendor/animate-numbers/jquery.animateNumbers.js"></script>
		<script type="text/javascript" src="assets/js/vendor/videobackground/jquery.videobackground.js"></script>
		<script type="text/javascript" src="assets/js/vendor/blockui/jquery.blockUI.js"></script>\

		<script src="assets/js/vendor/datatables/jquery.dataTables.min.js"></script>
		<script src="assets/js/vendor/datatables/ColReorderWithResize.js"></script>
		<script src="assets/js/vendor/datatables/colvis/dataTables.colVis.min.js"></script>
		<script src="assets/js/vendor/datatables/tabletools/ZeroClipboard.js"></script>
		<script src="assets/js/vendor/datatables/tabletools/dataTables.tableTools.min.js"></script>
		<script src="assets/js/vendor/datatables/dataTables.bootstrap.js"></script>

		<script src="assets/js/vendor/chosen/chosen.jquery.min.js"></script>

		<script src="assets/js/minimal.min.js"></script>

		<script>
			$(function() {

				// Add custom class to pagination div
				$.fn.dataTableExt.oStdClasses.sPaging = 'dataTables_paginate paging_bootstrap paging_custom';

				/*************************************************/
				/**************** BASIC DATATABLE ****************/
				/*************************************************/

				/* Define two custom functions (asc and desc) for string sorting */
				jQuery.fn.dataTableExt.oSort['string-case-asc'] = function(x, y) {
					return((x < y) ? -1 : ((x > y) ? 1 : 0));
				};

				jQuery.fn.dataTableExt.oSort['string-case-desc'] = function(x, y) {
					return((x < y) ? 1 : ((x > y) ? -1 : 0));
				};

				/* Add a click handler to the rows - this could be used as a callback */
				$("#basicDataTable tbody tr").click(function(e) {
					if($(this).hasClass('row_selected')) {
						$(this).removeClass('row_selected');
					} else {
						oTable01.$('tr.row_selected').removeClass('row_selected');
						$(this).addClass('row_selected');
					}

					// FadeIn/Out delete rows button
					if($('#basicDataTable tr.row_selected').length > 0) {
						$('#deleteRow').stop().fadeIn(300);
					} else {
						$('#deleteRow').stop().fadeOut(300);
					}
				});

				/* Build the DataTable with third column using our custom sort functions */
				var oTable01 = $('#basicDataTable').dataTable({
					"sDom": "R<'row'<'col-md-6'l><'col-md-6'f>r>" +
						"t" +
						"<'row'<'col-md-4 sm-center'i><'col-md-4'><'col-md-4 text-right sm-center'p>>",
					"oLanguage": {
						"sSearch": ""
					},
					"aaSorting": [
						[0, 'asc'],
						[1, 'asc']
					],
					"aoColumns": [
						null,
						null,
						{
							"sType": 'string-case'
						},
						null,
						null
					],
					"fnInitComplete": function(oSettings, json) {
						$('.dataTables_filter input').attr("placeholder", "Search");
					}
				});

				// Append delete button to table
				var deleteRowLink = '<a href="#" id="deleteRow" class="btn btn-red btn-xs delete-row">Delete selected row</a>'
				$('#basicDataTable_wrapper').append(deleteRowLink);

				/* Add a click handler for the delete row */
				$('#deleteRow').click(function() {
					var anSelected = fnGetSelected(oTable01);
					if(anSelected.length !== 0) {
						oTable01.fnDeleteRow(anSelected[0]);
						$('#deleteRow').stop().fadeOut(300);
					}
				});

				/* Get the rows which are currently selected */
				function fnGetSelected(oTable01Local) {
					return oTable01Local.$('tr.row_selected');
				};

				/*******************************************************/
				/**************** INLINE EDIT DATATABLE ****************/
				/*******************************************************/

				function restoreRow(oTable02, nRow) {
					var aData = oTable02.fnGetData(nRow);
					var jqTds = $('>td', nRow);

					for(var i = 0, iLen = jqTds.length; i < iLen; i++) {
						oTable02.fnUpdate(aData[i], nRow, i, false);
					}

					oTable02.fnDraw();
				};

				function editRow(oTable02, nRow) {
					var aData = oTable02.fnGetData(nRow);
					var jqTds = $('>td', nRow);
					jqTds[0].innerHTML = '<input type="text" value="' + aData[0] + '">';
					jqTds[1].innerHTML = '<input type="text" value="' + aData[1] + '">';
					jqTds[2].innerHTML = '<input type="text" value="' + aData[2] + '">';
					jqTds[3].innerHTML = '<input type="text" value="' + aData[3] + '">';
					jqTds[4].innerHTML = '<input type="text" value="' + aData[4] + '">';
					jqTds[5].innerHTML = '<a class="edit save" href="#">Save</a><a class="delete" href="#">Delete</a>';
				};

				function saveRow(oTable02, nRow) {
					var jqInputs = $('input', nRow);
					oTable02.fnUpdate(jqInputs[0].value, nRow, 0, false);
					oTable02.fnUpdate(jqInputs[1].value, nRow, 1, false);
					oTable02.fnUpdate(jqInputs[2].value, nRow, 2, false);
					oTable02.fnUpdate(jqInputs[3].value, nRow, 3, false);
					oTable02.fnUpdate(jqInputs[4].value, nRow, 4, false);
					oTable02.fnUpdate('<a class="edit" href="#">Edit</a><a class="delete" href="#">Delete</a>', nRow, 5, false);
					oTable02.fnDraw();
				};

				var oTable02 = $('#inlineEditDataTable').dataTable({
					"sDom": "R<'row'<'col-md-6'l><'col-md-6'f>r>" +
						"t" +
						"<'row'<'col-md-4 sm-center'i><'col-md-4'><'col-md-4 text-right sm-center'p>>",
					"oLanguage": {
						"sSearch": ""
					},
					"aoColumnDefs": [{
						'bSortable': false,
						'aTargets': ["no-sort"]
					}],
					"fnInitComplete": function(oSettings, json) {
						$('.dataTables_filter input').attr("placeholder", "Search");
					}
				});

				// Append add row button to table
				var addRowLink = '<a href="#" id="addRow" class="btn btn-green btn-xs add-row">Add row</a>'
				$('#inlineEditDataTable_wrapper').append(addRowLink);

				var nEditing = null;

				// Add row initialize
				$('#addRow').click(function(e) {
					e.preventDefault();

					// Only allow a new row when not currently editing
					if(nEditing !== null) {
						return;
					}

					var aiNew = oTable02.fnAddData(['', '', '', '', '', '<a class="edit" href="">Edit</a>', '<a class="delete" href="">Delete</a>']);
					var nRow = oTable02.fnGetNodes(aiNew[0]);
					editRow(oTable02, nRow);
					nEditing = nRow;

					$(nRow).find('td:last-child').addClass('actions text-center');
				});

				// Delete row initialize
				$(document).on("click", "#inlineEditDataTable a.delete", function(e) {
					e.preventDefault();

					var nRow = $(this).parents('tr')[0];
					oTable02.fnDeleteRow(nRow);
				});

				// Edit row initialize
				$(document).on("click", "#inlineEditDataTable a.edit", function(e) {
					e.preventDefault();

					/* Get the row as a parent of the link that was clicked on */
					var nRow = $(this).parents('tr')[0];

					if(nEditing !== null && nEditing != nRow) {
						/* A different row is being edited - the edit should be cancelled and this row edited */
						restoreRow(oTable02, nEditing);
						editRow(oTable02, nRow);
						nEditing = nRow;
					} else if(nEditing == nRow && this.innerHTML == "Save") {
						/* This row is being edited and should be saved */
						saveRow(oTable02, nEditing);
						nEditing = null;
					} else {
						/* No row currently being edited */
						editRow(oTable02, nRow);
						nEditing = nRow;
					}
				});

				/******************************************************/
				/**************** DRILL DOWN DATATABLE ****************/
				/******************************************************/

				var anOpen = [];

				var oTable03 = $('#drillDownDataTable').dataTable({
					"sDom": "R<'row'<'col-md-6'l><'col-md-6'f>r>" +
						"t" +
						"<'row'<'col-md-4 sm-center'i><'col-md-4'><'col-md-4 text-right sm-center'p>>",
					"oLanguage": {
						"sSearch": ""
					},
					"aoColumnDefs": [{
						'bSortable': false,
						'aTargets': ["no-sort"]
					}],
					"aaSorting": [
						[1, "asc"]
					],
					"bProcessing": true,
					"sAjaxSource": "assets/js/vendor/datatables/ajax/sources/objects.txt",
					"aoColumns": [{
							"mDataProp": null,
							"sClass": "control text-center",
							"sDefaultContent": '<a href="#"><i class="fa fa-plus"></i></a>'
						},
						{
							"mDataProp": "engine"
						},
						{
							"mDataProp": "browser"
						},
						{
							"mDataProp": "grade"
						}
					],
					"fnInitComplete": function(oSettings, json) {
						$('.dataTables_filter input').attr("placeholder", "Search");
					}
				});

				$(document).on('click', '#drillDownDataTable td.control', function() {
					var nTr = this.parentNode;
					var i = $.inArray(nTr, anOpen);

					$(anOpen).each(function() {
						if(this !== nTr) {
							$('td.control', this).click();
						}
					});

					if(i === -1) {
						$('i', this).removeClass().addClass('fa fa-minus');
						$(this).parent().addClass('drilled');
						var nDetailsRow = oTable03.fnOpen(nTr, fnFormatDetails(oTable03, nTr), 'details');
						$('div.innerDetails', nDetailsRow).slideDown();
						anOpen.push(nTr);
					} else {
						$('i', this).removeClass().addClass('fa fa-plus');
						$(this).parent().removeClass('drilled');
						$('div.innerDetails', $(nTr).next()[0]).slideUp(function() {
							oTable03.fnClose(nTr);
							anOpen.splice(i, 1);
						});
					}

					return false;
				});

				function fnFormatDetails(oTable03, nTr) {
					var oData = oTable03.fnGetData(nTr);
					var sOut =
						'<div class="innerDetails">' +
						'<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
						'<tr><td>Rendering engine:</td><td>' + oData.engine + '</td></tr>' +
						'<tr><td>Browser:</td><td>' + oData.browser + '</td></tr>' +
						'<tr><td>Platform:</td><td>' + oData.platform + '</td></tr>' +
						'<tr><td>Version:</td><td>' + oData.version + '</td></tr>' +
						'<tr><td>Grade:</td><td>' + oData.grade + '</td></tr>' +
						'</table>' +
						'</div>';
					return sOut;
				};

				/****************************************************/
				/**************** ADVANCED DATATABLE ****************/
				/****************************************************/

				var oTable04 = $('#advancedDataTable').dataTable({
					"sDom": "<'row'<'col-md-4'l><'col-md-4 text-center sm-left'T C><'col-md-4'f>r>" +
						"t" +
						"<'row'<'col-md-4 sm-center'i><'col-md-4'><'col-md-4 text-right sm-center'p>>",
					"oLanguage": {
						"sSearch": ""
					},
					"oTableTools": {
						"sSwfPath": "assets/js/vendor/datatables/tabletools/swf/copy_csv_xls_pdf.swf",
						"aButtons": [
							"copy",
							"print",
							{
								"sExtends": "collection",
								"sButtonText": 'Save <span class="caret" />',
								"aButtons": ["csv", "xls", "pdf"]
							}
						]
					},
					"fnInitComplete": function(oSettings, json) {
						$('.dataTables_filter input').attr("placeholder", "Search");
					},
					"oColVis": {
						"buttonText": '<i class="fa fa-eye"></i>'
					}
				});

				$('.ColVis_MasterButton').on('click', function() {
					var newtop = $('.ColVis_collection').position().top - 45;

					$('.ColVis_collection').addClass('dropdown-menu');
					$('.ColVis_collection>li>label').addClass('btn btn-default')
					$('.ColVis_collection').css('top', newtop + 'px');
				});

				$('.DTTT_button_collection').on('click', function() {
					var newtop = $('.DTTT_dropdown').position().top - 45;
					$('.DTTT_dropdown').css('top', newtop + 'px');
				});

				//initialize chosen
				$('.dataTables_length select').chosen({
					disable_search_threshold: 10
				});

			})
		</script>
	</body>

</html>